<template>
	<div>



		<div class="title">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/task' }">任务管理</el-breadcrumb-item>

			</el-breadcrumb>
		</div>
		<div class="body">




			<el-row :gutter="10" type="flex" justify="space-between" align="middle">
				<!-- 左边的任务管理 -->
				<el-col :span="4">
					<div class="icon">
						<i class="el-icon-edit-outline"></i>
					</div>

					<b><span class="top">任务管理</span></b>


				</el-col>

				<!-- 右边的输入框和按钮 -->
				<el-col :span="16">
					<el-row :gutter="10" type="flex" justify="end" align="middle">
						<el-col :span="6">
							<el-input placeholder="请输入关键字搜索" size="small" style="width: 100%;"
								v-model="form.taskName"></el-input>
						</el-col>
						<el-col :span="2">
							<el-button type="primary" size="small" style="width: 100%;"
								@click="findTask">高级搜索</el-button>
						</el-col>
						<el-col :span="2">
							<el-button type="success" size="small" style="width: 100%;" @click="Add()">新增</el-button>
						</el-col>
						<el-col :span="2">
							<el-button type="warning" size="small" style="width: 100%;"
								@click="updateSelect">编辑</el-button>
						</el-col>
						<el-col :span="2">
							<el-button type="danger" size="small" style="width: 100%;" @click="commitSelect">提交</el-button>
						</el-col>
						<el-col :span="2">
							<el-button type="danger" size="small" style="width: 100%;" @click="processSelect">处理</el-button>
						</el-col>
						<el-col :span="2">
							<el-button type="danger" size="small" style="width: 100%;" @click="deleteSelect">删除</el-button>
						</el-col>
					</el-row>
				</el-col>
			</el-row>




			<hr>

			<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column label="序号" prop="id" width="80"></el-table-column>
				<el-table-column label="任务编号" prop="taskId"></el-table-column>
				<el-table-column label="任务名称" prop="taskName"></el-table-column>
				<el-table-column label="任务类型" prop="taskType"></el-table-column>
				<el-table-column label="充电站名称" prop="cname"></el-table-column>
				<el-table-column label="计划开始时间" prop="planStarttime"></el-table-column>
				<el-table-column label="计划结束时间" prop="planEndtime"></el-table-column>
				<el-table-column label="实际开始时间" prop="startTime"></el-table-column>
				<el-table-column label="实际结束时间" prop="endTime"></el-table-column>
				<el-table-column label="任务状态" prop="status"></el-table-column>
				<el-table-column label="操作" width="300">
					<template slot-scope="scope">
						<span class="button" @click="handleView(scope.row)">查看</span>
						<span class="button" @click="handleEdit(scope.row)">编辑</span>
						<span class="button" @click="commitTask(scope.row)">提交</span>
						<span class="button" @click="processTask(scope.row)">处理</span>
						<span class="button" @click="handleDisable(scope.row)">退回</span>
						<span class="button" @click="handleDelete(scope.row)">删除</span>
					</template>
				</el-table-column>
			</el-table>




			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="form.pageNum" :page-sizes="[2, 4, 6, 8]" :page-size="form.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>








		</div>
	</div>

</template>

<script>
	import {findTask,deleteTask,deleteSelect} from "@/api/task/Task"; // 确保此路径正确

	export default {
		data() {
			return {
				tableData: [],
				form: {
					pageNum: 1,
					pageSize: 4
				},
				selectedRows: [],
				dialogFormVisible: false,
				pojo:[],
				total:0,

			}
		},
		methods: {
			handleDelete(row){
				deleteTask(row.id).then(res => {
					
					if(res.code==200){
						this.$message({
						  message: '删除成功',
						  type: 'success'
						});
						this.findTask();
					}
				}).catch(error => {
					console.error("删除失败:", error);
				});
			},
			
			handleView(row) {
				this.$router.push('/showTask/' + row.id)

			},
			processTask(row){
				this.$router.push('/processTask/' + row.id)
			},
			handleEdit(row) {
				this.$router.push('/updateTask/' + row.id)
			
			},
			Add() {
				this.$router.push('/addTask')
			
			},
			updateSelect() {

				if (this.selectedRows.length == 1) {
					
				this.$router.push('/updateTask/' + this.selectedRows[0].id)
					
				} else {
					this.$message({
						type: 'info',
						message: '请选中一条数据'
					});
				}

			},
			commitSelect(){
				if (this.selectedRows.length == 1) {
					
				this.$router.push('/showProcessTask/' + this.selectedRows[0].id)
					
				} else {
					this.$message({
						type: 'info',
						message: '请选中一条数据'
					});
				}
			},
			processSelect(){
				if (this.selectedRows.length == 1) {
					
				this.$router.push('/processTask/' + this.selectedRows[0].id)
					
				} else {
					this.$message({
						type: 'info',
						message: '请选中一条数据'
					});
				}
			},
			deleteSelect(){
				if (this.selectedRows.length >=1) {
					this.$confirm('此操作将永久删除该行数据，是否继续？','提示',{
						confirmButtonText:'确定',
						cancelButtonText:'取消',
						type:'warning'
					}).then(()=>{
						var ids=[];
						for (var i = 0; i < this.selectedRows.length; i++) {
							ids.push(this.selectedRows[i].id)
						}
						deleteSelect(ids).then(res=>{
							if(res.code==200){
								this.$message({
								  message: '删除成功',
								  type: 'success'
								});
								this.findTask();
							}
						}).catch(error => {
					console.error("删除失败:", error);
					});
						
					})
				
					
				} else {
					this.$message({
						type: 'info',
						message: '请选中一条数据'
					});
				}
			},
			handleSelectionChange(selection) {
				this.selectedRows = selection;

			},
			handleSizeChange(val) {

				console.log(`每页 ${val} 条`);
				this.form.pageSize = val
				this.findTask()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.form.pageNum = val
				this.findTask()

			},
			findTask(form) {
				findTask(this.form).then(res => {
					this.tableData=res.data.list
					this.total = res.data.total;
					
					
				}).catch(error => {
					console.error("获取用户列表失败:", error);
				});
			}
		},
		created() {
			this.findTask()

		}
	}
</script>

<style>
	.title {
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: 20px;

	}

	.button {
		cursor: pointer;
		/* 鼠标悬停时变成手形指针 */
		color: #409EFF;
		/* 可以根据需要调整颜色 */
		margin-right: 5px;
	}

	.top {
		font-size: 15px;
		margin-left: 50px;
	}

	.icon {
		width: 30px;
		height: 30px;
		background-color: skyblue;
		align-items: center;
		text-align: center;
		margin-bottom: -25px;
		font-size: 20px;
		margin-left: 0px;
	}

	.body {
		margin-left: 20px;
	}
	.el-dialog {
	  width: 600px;
	  margin-top: 20px; /* 可选，调整对话框位置 */
	}
	
	.el-dialog__header {
	  background-color: #09C;
	  color: #fff;
	}
	
	.el-form--label-top .el-form-item {
	  margin-bottom: 15px;
	}
	
	.el-form-item__label {
	  font-size: 14px;
	  color: #7f8c9a;
	}
	
	.el-input,
	.el-select {
	  border-radius: 4px;
	  border: 1px solid #dcdfe6;
	  background-color: #f5f7fa;
	}
	
	.el-input:focus,
	.el-select:focus {
	  border-color: #409EFF;
	}
	
	.el-form-item__content {
	  font-size: 14px;
	}
	
	.el-date-picker {
	  width: 100%;
	}
</style>